<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-23 08:52:48
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-23 09:42:25
-->
<template>
  <div class="header" :style='{ background: bg }'>
    <div class="left" @click="btn">
      <router-link :to="path" v-if="path">
        <slot name="left">
        </slot>
      </router-link>
      <slot name="left" v-else> </slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right" @click="$emit('share')">
      <slot name="right"></slot>
    </div>
  </div>
</template>
           
<script>
/* 
属性

属性名   说明       默认值   类型

bg      设置背景色   red     string
path    左侧跳转路径 ''     string

事件
back     左侧点击事件
share    右侧点击事件

*/
export default {
  name: 'NavBar',
  props: {
    bg: {
      type: String,
      default: 'red'
    },
    path: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    btn () {
      console.log(222);
      this.$emit('back')
    }
  }
}
</script>
<style   scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left,
.right {
  flex: 2;
  text-align: center;
}

.center {
  flex: 4;
}

h3 {
  margin: 0;
  padding: 0;
  text-align: center;
}
</style>